{include file="public/head"/}
<script language="javascript">
	$(document).ready(function () {
        var lang = $('#lang').text();
        var language = '';
        if (lang == 'pt-br') {
            language = 'pt-BR';
            langsql = 'pt';
            format = 'dd-mm-yyyy';
        } else if (lang == 'en-us') {
            language = 'en';
            langsql = 'en';
            format = 'dd-mm-yyyy';
        } else {
            language = 'zh-CN';
            langsql = 'zh';
            format = 'yyyy-mm-dd'
        }
		// datatimepicker 设置
		$('.form_datetime').datetimepicker({
			language: language, // en ,zh-CN, pt-BR
            format:format,
			minView: 'month',
			weekStart: 0, //一周从哪一天开始
			todayBtn:  1, //
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 1,
			showMeridian: 1
		});
	});
</script>

<div class="container-fluid" id="main">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>

    <div class="ntDesktop">
    	<div class="ntDesktop-head" ref="type" data-type="{$request}">{:strtoupper($title)}</div>
      <input type="hidden" id="plan" value="{if isset($plan_id)}{$plan_id}{/if}">

        <div class="row clearfix" style="padding-top:0px">
            <div class="col-md-12 text-right">
                <div>
                    <input type="hidden" id="month_" value="{$month}">
                    <a href="{:url('buy/plan',array('month'=>$month))}" class="btn btn-default" id="back_to_list"><span class="glyphicon glyphicon-chevron-left"></span>{:strtoupper(lang('back_to_list'))}</a>
                    <button class="btn btn-primary" style="padding-left:2em;padding-right:2em;" @click="savefun(true)"  :disabled="isdisabled"> <span class="glyphicon glyphicon-floppy-saved"></span> {:strtoupper(lang("return_to_list_after_saving"))} </button>
                    <button href="javascript:;" class="btn btn-primary" style="padding-left:2em;padding-right:2em;" @click="savefun(false)"  :disabled="isdisabled"> <span class="glyphicon glyphicon-floppy-save"></span> {:strtoupper(lang("continue_adding_new_content_after_saving"))}</button>
                </div>
            </div>
        </div>

        <div class="row" style="padding:1em" v-cloak>
            <div class="col-md-7">
                <table class="table table-striped table-hover ntTable">
                    <tbody>
                        <tr>
                            <td style="vertical-align:middle">{:strtoupper(lang("designated_buyer"))}<span class="required"></span></td>
                            <td style="vertical-align:middle">
                                <select class="form-control" v-model="data.buy_id">
                                    <option value="0">{:strtoupper(lang("please_select_buyer"))}</option>
                                    <option :value="item.id" v-for="(item,index) in dataval.buy_persion" :key="item.id">{{item.nickname}}</option>
                                </select>
                            </td>
                            <td style="vertical-align:middle">{:strtoupper(lang("delivery_time"))}<span class="required"></span></td>
                            <td>
                                <div class="input-group date form_datetime" data-date="" data-date-format="yyyy-mm-dd" data-link-field="workdate">
                                    <input class="form-control" id="dateval" type="text" ref="date" readonly>
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" style="margin:0"></span></span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>{:strtoupper(lang("delivery_address"))}<span class="required"></span></td>
                            <td colspan="3">
                                <select class="form-control" v-model="data.port_id">
                                    <option value="0">{:strtoupper(lang("select_delivery_address"))}</option>
                                    <option :value="item.id" v-for="(item,index) in dataval.port" :key="item.id" >{{item.name}}</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>{:strtoupper(lang("designated_company"))}</td>
                            <td colspan="3">
                            	<div class="row">
	                                <div class="col-md-12">
                                        <div class="input-group">
                                            <input type="text" class="form-control col-md-12" ref="company" placeholder="{:strtoupper(lang("enter_the_company_name"))}" width="100%">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-default" @click="getcompany">
                                                    <span class="glyphicon glyphicon-search"></span> {:strtoupper(lang('search'))}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td colspan="3">
                                <select class="form-control" v-model="data.company_id">
                                    <option value="0">{:strtoupper(lang("please_select_company"))}</option>
                                    <option :value="item.id" v-for="(item,index) in company">{{item.name}}</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>{:strtoupper(lang('the_role_of_product'))}<span class="required"></span></td>
                            <td colspan="3">
                            	<div class="row">
	                                <div class="col-md-12">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <select  class="form-control" name="" ref="procat" id="procat" style="width: 150px;" @change="sqlpro">
                                                    <option value="0" selected >{:strtoupper(lang("please_select_a_product_category"))}</option>
                                                    <option :value="item.id" v-for="(item,index) in dataval.procat">
                                                        <template v-for="(level,index) in item.level">
                                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                                        </template>
                                                        {{item.content}}
                                                    </option>
                                                </select>
                                            </div>
                                            <input type="text" class="form-control col-md-12" value="" ref="searchText"  placeholder="{:strtoupper(lang('enter_product_role_ID,_model_and_name'))}" width="100%">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-default" @click="sqlpro">
                                                    <span class="glyphicon glyphicon-search " ></span> {:strtoupper(lang('search'))}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <tr>
                        	<td>&nbsp;</td>
                            <td colspan="3">
                                <select class="form-control" @change="changepro" ref='selpro' v-model="data.proval">
                                    <option value="0">{{selectText}}</option>
                                    <option :value="item.id+'-'+item.pro_id" v-for="(item,index) in prolist">
                                        {{ formatUnit(item.id,'ID') +(item.brand_name ? ' / '+item.brand_name:'') + (item.model ? ' / '+item.model:'')+(item.content ? ' / '+item.content:'')}}
                                    </option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>{:strtoupper(lang("purchase_quantity_"))}(CTN)<span class="required"></span></td>
                            <td>
                                <input type="number" class="form-control text-right" v-model="data.qty" placeholder="{strtoupper(:lang('purchased_quantity_(box)'))}" >
                            </td>
                            <td>{:strtoupper(lang("purchase_prices"))}</td>
                            <td>
                                <input type="number" class="form-control text-right" v-model="data.price">
                            </td>
                        </tr>
                        <tr  v-if="norm">
                            <td>{:strtoupper(lang("quantity"))}/CTN</td>
                            <td><input type="number" class="form-control text-right" v-model="norm.qty"></td>
                            <td>{:strtoupper(lang("weight"))}/CTN</td>
                            <td><input type="number" class="form-control text-right" v-model="norm.ctn_kgs"></td>
                        </tr>
                        <tr  v-if="norm">
                            <td>{:strtoupper(lang("dimension"))}/CTN</td>
                            <td>
                                <input type="text" class="form-control text-right" v-model="norm.ctn_size" @change="putSize">
                            </td>
                            <td>{:strtoupper(lang("volume"))}/CTN</td>
                            <td><input type="number" class="form-control text-right" v-model="norm.ctn_m3" disabled="true"></td>
                        </tr>
                        <tr  v-if="norm">
                            <td>{:strtoupper(lang("total_quantity"))}</td>
                            <td class="text-right">{{formatUnit(sumnub,'UN')}} <span class="unit">PCS</span></td>
                            <td>{:strtoupper(lang("total_amount"))}</td>
                            <td class="text-right">{{formatUnit(summn,'$')}} <span class="unit">CNY</span></td>
                        </tr>
                        <tr  v-if="norm">
                            <td>{:strtoupper(lang("total_volume"))}</td>
                            <td class="text-right">{{formatUnit(sumtg,'M3')}}<span class="unit">CBM</span></td>
                            <td>{:strtoupper(lang("total_weight"))}</td>
                            <td class="text-right">{{formatUnit(sumkgs,'KG')}} <span class="unit">KGS</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-5">
                <div class="row">
                    <ul class="nav nav-tabs" id="my_tab">
                        <li class="active">
                        	<a href="#buy_pro_info" data-toggle="tab">产品资料</a>
                        </li>
                        <li v-for="(item,index) in prodesc_cat">
                        	<a :href="'#buy_pro_'+item.id" data-toggle="tab">{{item.name}}</a>
                        </li>
                        <li>
                        	<a href="#buy_item" data-toggle="tab">产品配件</a>
                        </li>
                        <li>
                            <a href="#buy_history" data-toggle="tab">{:strtoupper(lang("purchased_history"))}</a>
                        </li>
                    </ul>
                </div>
            	<div class="row tab-content">

                    <!-- 产品资料 -->
                	<div class="tab-pane in active" id="buy_pro_info">
                        <div class="row no_date" v-if="!prodata">{:strtoupper(lang('no_data'))}</div>
                    	<div class="row" v-if="prodata">
                        	<div class="col-md-3 text-center">
                            	<img :src="prodata.img_url" width="128px" height="128px" border="0" >
                            </div>
                            <div class="col-md-9">
                                <table class="table table-striped table-hover ntTable">
                                    <tbody>
                                        <tr>
                                            <td>{:strtoupper(lang('serial_number'))}</td>
                                            <td>{{formatUnit(prochar.id ? prochar.id : prodata.id,'ID')}}</td>
                                        </tr>
                                        <tr>
                                            <td style="min-width: 100px;">{:strtoupper(lang("brand"))}</td>
                                            <td>{{prodata.brand_name}}</td>
                                        </tr>
                                        <tr>
                                            <td>{:strtoupper(lang("model"))}</td>
                                            <td>{{prochar.model}}</td>
                                        </tr>
                                        <tr v-for="(item,index) in prochar.feature">
                                            <td>{{item.name}}</td>
                                            <td colspan="3">{{item.value}}</td>
                                        </tr>
                                        <tr>
                                            <td>{:strtoupper(lang("product_name"))}</td>
                                            <td>{{prodata.content}}</td>
                                        </tr>
                                        <tr>
                                            <td>{:strtoupper(lang("introduction"))}</td>
                                            <td colspan="3">{{prodata.prodesc}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                	<div class="tab-pane" :id="'buy_pro_'+item.id"  v-for="(item,index) in prodesc_cat">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                                <tr>
                                    <td>
                                        <textarea class="form-control" style="height:25vh" v-model="item.content">
                                        </textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 产品配件 -->
                	<div class="tab-pane" id="buy_item">
                        <div class="row no_date" v-if="!pro_item.length">{:lang('no_data')}</div>
                        <table v-if="pro_item.length" class="table table-striped table-hover ntTable">
                            <thead>
                                <tr>
                                    <td>{:strtoupper(lang("purchase"))}</td>
                                    <td>{:strtoupper(lang('product_name'))}</td>
                                    <td>配给数量</td>
                                    <td width="20%">{:strtoupper(lang("purchase_quantity_"))}</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in pro_item">
                                    <td class="text-center"><input type="checkbox"  v-model="!pro_item[index].is_public"></td>
                                    <td>
                                    	<small>{{ formatUnit(item.prochar_id2item,'id') + (item.brand_name ? '/'+item.brand_name : '') + (item.model ? '/'+item.model : '')}}</small><br>
                                        <a href="" target="_blank">{{item.content}}</a>
                                    </td>
                                    <td>{{item.match_ratio}}<span class="unit">PCS/UN</span></td>
                                    <td><input type="number" class="form-control text-right" readonly="readonly" :value="numsum(item.match_ratio,index)"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 历史记录 -->
                	<div class="tab-pane" id="buy_history">
                        <div class="row no_date" v-if="!history.length">{:lang('no_data')}</div>
                        <table v-if="history.length" class="table table-striped table-hover ntTable">
                            <thead>
                                <tr>
                                    <td>{:strtoupper(lang("contract"))}</td>
                                    <td>{:strtoupper(lang("date"))}</td>
                                    <td>{:strtoupper(lang("company"))}</td>
                                    <td>{:strtoupper(lang("quantity"))}</td>
                                    <td>{:strtoupper(lang('price'))}</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in history">
                                    <td><a :href="'/admin/buypo/editBuyPo?request=edit&id='+item.po_id" target="_blank">{{formatUnit(item.po_id,'ID')}}</a></td>
                                    <td>{{item.create_time}}</td>
                                    <td><a :href="'/admin/customer/companycheck?company_id='+item.company_id+'&tab=detail'" target="_blank">{{item.name}}</a></td>
                                    <td style="text-align: right;">{{formatUnit( (item.qty*item.ctn_qty),'UN')}}<span class='unit'>PCS</span></td>
                                    <td style="text-align: right;">{{formatUnit(item.price,'$')}}<span class='unit'>CNY</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 是否继续保存 -->
                <div class="modal fade" id="repeat_Modal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" style="width:60%">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="ntModalLabel">发现重复采购是否要继续添加</h4>
                            </div>
                            <div class="modal-body">
                               <div class="row">
                                    <div class="col-md-12">
                                        已有采购计划资料
                                    </div>
                                    <div class="col-md-12">
                                        <table class="table">
                                            <tr>
                                                <td>采购编号</td>
                                                <td> {{ formatUnit(exist.id,'id') }} </td>
                                            </tr>
                                            <tr>
                                                <td><img :src="exist.img_url" width="48px" height="48px" border="0" ></td>
                                                <td>
                                                    <small>{{exist.prochar_id ? exist.prochar_id : exist.pro_id}} / {{exist.brand_name ? exist.brand_name : ''}} {{exist.model ? ' / '+ exist.model : ''}}</small><br>{{exist.pro_name}}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>数量</td>
                                                <td> {{formatUnit(exist.qty,'UN')}} <span class="unit">CTN</span> x {{exist.ctn_qty}} <span class="unit">PCS/CTN</span> =   {{formatUnit(exist.qty*exist.ctn_qty,'UN')}}<span class="unit">PCS</span></td>
                                            </tr>
                                            <tr>
                                                <td>合同号</td>
                                                <td>{{ formatUnit(exist.po_id,'id')}}</td>
                                            </tr>
                                            <tr>
                                                <td>供应商</td>
                                                <td>{{exist.company_name ? exist.company_name : '-'}}</td>
                                            </tr>
                                            <tr>
                                                <td>交货</td>
                                                <td>{{exist.port_name}} / {{exist.delivery_at}}</td>
                                            </tr>
                                            <tr>
                                                <td>编辑</td>
                                                <td>{{exist.create_name}} / {{exist.create_time}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>取消</button>
                                <button type="button" class="btn btn-primary" style="padding-left:24px;padding-right:24px" @click="Continue"><span class="glyphicon glyphicon-floppy-disk"></span>继续保存</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/Admin/js/plan_addnew.js"></script>
{include file="public/foot"/}